<template>
	<view>
		<view class="divider_line"></view>
		<view class="note-img note-img_1" v-if="otherList[0]">
			<image :src="`https:${otherList[0].body.items[0].img_url}`" mode="widthFix" lazy-load></image>
		</view>
		<view class="divider_line"></view>
		<view class="note-item" v-if="shopList[0]">
			<view class="box-item" @click="toShopDetail(shopList[0].body.items[0])">
				<image :src="`https:${shopList[0].body.items[0].img_url}`" mode=""></image>
				<view class="note-info">
					<view class="name-mon el-flex">
						<text class="name text-ellipsis">{{shopList[0].body.items[0].product_name}}</text>
						<text class="item-money el-flex">
							<text class="qi">¥</text>
							<text class="num">{{shopList[0].body.items[0].show_price}}</text>
							<text class="qi">
								起
							</text>
						</text>
					</view>
					<view class="info-mon el-flex">
						<text class="info text-ellipsis">{{shopList[0].body.items[0].product_brief}}</text>
						<view class="btn">
							<view class="buybtn">
								立即购买
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="divider_line"></view>
		<view class="note-item" v-if="shopList[1]">
			<view class="box-item" @click="toShopDetail(shopList[1].body.items[0])">
				<view class="item-img">
					<image :src="`https:${shopList[1].body.items[0].img_url}`" mode=""></image>
				</view>
				<view class="note-info">
					<view class="name-mon el-flex">
						<text class="name text-ellipsis">{{shopList[1].body.items[0].product_name}}</text>
						<text class="item-money el-flex">
							<text class="qi">¥</text>
							<text class="num">{{shopList[1].body.items[0].show_price}}</text>
							<text class="qi">
								起
							</text>
						</text>
					</view>
					<view class="info-mon el-flex">
						<text class="info text-ellipsis">{{shopList[1].body.items[0].product_brief}}</text>
						<view class="btn">
							<view class="buybtn">
								立即购买
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="divider_line"></view>
		<view class="note-img note-img_1" v-if="otherList[1]">
			<image :src="`https:${otherList[1].body.items[0].img_url}`" mode="widthFix" lazy-load></image>
		</view>
		<view class="divider_line"></view>
		<view class="note-img note-img_2" v-if="otherList[2]">
			<image :src="`https:${otherList[2].body.items[0].img_url}`" mode="widthFix" lazy-load></image>
		</view>
		<view class="divider_line"></view>
		<view class="note-img note-img_3" v-if="otherList[3]">
			<image :src="`https:${otherList[3].body.items[0].img_url}`" mode="widthFix" lazy-load></image>
		</view>
		<view class="divider_line"></view>
		<view class="note-img note-img_3" v-if="otherList[4]">
			<image :src="`https:${otherList[4].body.items[0].img_url}`" mode="widthFix" lazy-load></image>
		</view>
		<view class="last-item" v-if="otherList[5]">
			<u-row>
				<u-col span="6" v-for="(item,index) in otherList[5].body.items" :key="index" @click='toActivityDetail(item)'>
					<view class="last-img">
						<image :src="item.img_url" mode="widthFix"></image>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="last-item" v-if="otherList[6]">
			<u-row>
				<u-col span="6" v-for="(item,index) in otherList[6].body.items" :key="index" @click='toActivityDetail(item)'>
					<view class="last-img">
						<image :src="item.img_url" mode="widthFix" lazy-load></image>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="last-item" v-if="otherList[7]">
			<u-row>
				<u-col span="6" v-for="(item,index) in otherList[7].body.items" :key="index" @click='toActivityDetail(item)'>
					
						<image :src="item.img_url" mode="widthFix" lazy-load></image>
			
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				shopList: [],
				otherList: [],
			};
		},
		methods: {
			toShopDetail(item) {
				let action = item.action
				if (action.productId && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.productId}`,
						success() {
			
						}
					})
				} else if (action.path && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.path}`,
						success() {
			
						}
					})
				}
			
			},
			toActivityDetail(item) {
				let action = item.action
				if (action.path && action.type == "activity") {
					let id = action.path.split('id=')[1]
					uni.navigateTo({
						url: `/subPage/activityDetail/activityDetail?id=${id}`,
						success() {
							
						}
					})
				} 
			},
			fetchData() {
				this.$request.get('/getData', {
					type: 'activity',
					page_id: '13176'
				}).then((res) => {
					let shopList = []
					let otherList = []
					let data = res.data.data.data.sections
					data.forEach(item => {
						if (item.view_type == 'list_one_type14') {
							shopList.push(item)
						} else if (item.view_type == 'cells_auto_fill') {
							otherList.push(item)
						}
					})
					this.otherList = otherList
					this.shopList = shopList
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
		},
		mounted() {
			this.fetchData()
		}
	}
</script>

<style lang="scss" scoped>
	.note-img {
		width: 100%;


		image {
			width: 100%;
		}
	}

	.note-img_1 {
		height: 84rpx;
	}

	.note-img_2 {
		height: 80rpx;
	}

	.note-img_3 {
		height: 76rpx;
	}

	.note-item {
		background: rgb(72, 120, 166);
		justify-content: space-between;
		padding: 0 0.12rem;

		.box-item {
			background-color: #fff;
		}

		image {
			width: 6.96rem;
			height: 4.36rem;
		}

		.note-info {
			    padding: 0.2rem 0.27rem;
			background-color: #fff;

			/deep/.u-button--mini {
				padding: 0px 0.48rem;
			}

			.name-mon {
				justify-content: space-between;

				.name {
					font-size: .32rem;
				}

				.num {
					font-size: .28rem;
				}
			}

			.info-mon {
				justify-content: space-between;

				.info {
					font-size: .22rem;
					    line-height: .3rem;
					color: rgba(0, 0, 0, .54);
				}

			}

			.btn {
				text-align: center;
			}

			.item-money {
				color: #ea625b;

				.qi {
					margin-left: 0.04rem;
					    font-size: .2rem;
					color: #ea625b;
					display: inline-block;
				}
			}
		}
	}

	.last-item {
height: 1.56rem;
			image {
				width: 100%;
			    height: 1.56rem;
		}
	}

	.divider_line {
		border-bottom: 0.266667rem solid rgb(72, 120, 166);
		background-color: rgb(72, 120, 166);
	}
</style>